<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录 - AI智能改写</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="js/uni.webview.js"></script>
    <style>
      .gradient-text {
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .gradient-bg {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      }
      .login-container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      .login-form {
        width: 100%;
        max-width: 420px;
      }
    </style>
  </head>
  <body class="bg-gray-50">
    <div id="app" class="login-container">
      <!-- 导航栏 -->
      <nav class="bg-white shadow-md w-full">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between h-16">
            <div class="flex">
              <div class="flex-shrink-0 flex items-center">
                <a href="index.html" class="text-2xl font-bold gradient-text"
                  >AI智能改写</a
                >
              </div>
              <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                <a
                  href="index.html"
                  class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >首页</a
                >
                <a
                  href="main.html"
                  class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >开始使用</a
                >
              </div>
            </div>
          </div>
        </div>
      </nav>

      <!-- 登录区域 -->
      <div
        class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"
      >
        <div class="login-form p-8 bg-white rounded-lg shadow-lg">
          <div class="text-center mb-8">
            <h2 class="text-3xl font-bold gradient-text">欢迎登录</h2>
            <p class="text-gray-500 mt-2">登录您的账户，开始智能降重之旅</p>
          </div>

          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="用户名/邮箱"
                prefix-icon="el-icon-user"
              >
                <template #prefix>
                  <i class="fas fa-user text-gray-400"></i>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="password" class="mt-4">
              <el-input
                v-model="loginForm.password"
                placeholder="密码"
                type="password"
                prefix-icon="el-icon-lock"
                show-password
              >
                <template #prefix>
                  <i class="fas fa-lock text-gray-400"></i>
                </template>
              </el-input>
            </el-form-item>

            <div class="flex items-center justify-between mt-4">
              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800"
                >忘记密码?</a
              >
            </div>

            <el-button
              type="primary"
              class="w-full mt-6 gradient-bg"
              @click="handleLogin"
              >登录</el-button
            >

            <div class="mt-6 flex items-center justify-center">
              <span class="text-gray-500 text-sm">还没有账户?</span>
              <a
                href="register.html"
                class="ml-1 text-sm text-indigo-600 hover:text-indigo-800"
                >立即注册</a
              >
            </div>
          </el-form>

          <div class="mt-8 pt-6 border-t border-gray-200">
            <p class="text-center text-sm text-gray-500 mb-4">其他登录方式</p>
            <div class="flex justify-center space-x-6">
              <a href="#" class="text-gray-400 hover:text-gray-600">
                <i class="fab fa-weixin text-2xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-gray-600">
                <i class="fab fa-qq text-2xl"></i>
              </a>
              <a href="#" class="text-gray-400 hover:text-gray-600">
                <i class="fab fa-weibo text-2xl"></i>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 页脚 -->
      <footer class="bg-white border-t border-gray-200 py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <p class="text-center text-sm text-gray-500">
            &copy; 2023 AI智能改写. 保留所有权利.
          </p>
        </div>
      </footer>
    </div>

    <script>
      const { createApp, ref, reactive } = Vue;

      const app = createApp({
        setup() {
          const loginForm = reactive({
            username: "",
            password: "",
          });

          const loginRules = {
            username: [
              {
                required: true,
                message: "请输入用户名或邮箱",
                trigger: "blur",
              },
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
              { min: 6, message: "密码长度不能少于6个字符", trigger: "blur" },
            ],
          };

          const rememberMe = ref(false);

          const handleLogin = () => {
            console.log("登录信息", loginForm, rememberMe.value);
            // 实际应用中，这里会有登录逻辑
            // window.location.href = 'main.html';
            console.log(window.parent.postMessage);
            window.parent.postMessage({ 
                methods: "getUserInfo",
             }, "*");
            // uni.navigateTo({
            //   url: "/uni_modules/uni-id-pages/pages/login/login-withpwd",
            // });
          };

          return {
            loginForm,
            loginRules,
            rememberMe,
            handleLogin,
          };
        },
      });

      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
